<template>
<div>
  <div class="ys-search-search">
    <div class="ys-body-search">
      <input type="text" placeholder="请输入搜索的内容">
    </div>
    <el-row class="mb-4" id="regBtn">
      <el-button type="primary" id="searchBtn" >搜索</el-button>
    </el-row>
  </div>
</div>
</template>

<script>
export default {
  name: "SearchIcon"
}
</script>

<style scoped>
.ys-search-search {
  width: 1190px;
  height: 100px;
  /*border: 1px solid black;*/
  background-color: white;
}
.ys-body-search {
  display: inline-block;
  width: 600px;
  height: 40px;
  border: 1px solid rgba(171, 171, 171, 0.49);
  position: absolute;
  margin-left: 300px;
  margin-top: 30px;
  border-radius: 20px 0 0 20px;
}

.ys-body-search > input {
  display: inline-block;
  height: 40px;
  width: 550px;
  margin-left: 46px;
  margin-top: 0;
  border: none;
  outline: 0 none !important;
}

#searchBtn {
  position: absolute;
  margin-left: 901px;
  margin-top: 30px;
  height: 42px;
  border-radius: 0px 20px 20px 0;
  border: none;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}
#searchBtn:hover {
  background-color: #0075bd;
  color: white;
  border: none;
}
</style>